{% extends 'contact.html' %}
{% block static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <style>
        #mytable2 th {
            text-align: center;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="layui-fluid">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3 layui-col-md-offset3">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>搜索文件夹：</legend>
                </fieldset>
            </div>

            <div class="layui-col-xs6 layui-col-sm6 layui-col-md3"
                 style="">
                <div class="col-md-9" style="z-index: 1">
                    <div class="input-group date" style="margin-top: 30px;">
                        <input type="text" class="form-control inp1" placeholder="请输入文件夹名">
                        <div class="input-group-addon search_data">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="z-index: 100">
            <div class="layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-md-offset1">
                <table class="table table-hover " id="mytable">
                    <thead>
                    <tr>
                        <th>文件夹名</th>
                        {% if super.super_user == 1 %}
                            <th>功能</th>
                        {% endif %}
                    </tr>
                    </thead>
                    <tbody id="tables">
                    </tbody>
                </table>
            </div>
            <div class=" layui-col-sm2 layui-col-md2 layui-col-md-offset0" style="height: 50px; z-index: 10">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>个人空间</legend>
                </fieldset>
                <div class="grid-demo" style="width: 100%;border:1px dashed red;">
                    <table class="table table-hover " id="mytable2">
                        <thead>
                        <tr>
                            <th>名字</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for name in username_list %}
                            <tr>
                                <th><a href="#" class="my_space">{{ name }}</a></th>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-row layui-fluid">
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 layui-col-lg7 layui-col-md-offset1">
                    <div id="demo7"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //个人空间
        $('.my_space').click(function () {
            let values = $(this).text();
            location.href = '{% url 'myadmin:File_Views' %}?file_name=' + values;
        })


    </script>
    <script>
        // 返回顶部
        layui.use(['util', 'laydate', 'layer'], function () {
            var util = layui.util
                , laydate = layui.laydate
                , layer = layui.layer;
            //固定块
            util.fixbar({
                css: {right: 50, bottom: 100}
                , bgcolor: '#393D49'
                , click: function (type) {
                    console.log(type);
                    if (type === 'top') {
                        layer.msg('返回顶部')
                    }
                }
            });
        });
    </script>

    <script>
        //文件夹删除
        function delete_1(file_name) {
            $.ajax({
                url: "{% url 'myadmin:File_Delete' %}",//路径
                type: "GET", //提交方式
                data: {"file_name": file_name},
                success: function (result) {//返回数据根据结果进行相应的处理
                    if (result.code = 200) {
                        layer.msg("删除成功！");
                        setTimeout(sleep, 1200);
                    }
                },
                error: function (error) {
                    layer.msg("500，请稍后尝试")
                }
            });
        }

        //定义一个函数
        function sleep() {
            window.location.reload();
        }

        // 搜索
        $(".search_data").click(function () {
            let input1 = $('.inp1').val();
            if (input1 == '') {
                layer.msg('请先输入文件夹名字');
            } else {
                $.ajax({
                    url: "{% url 'myadmin:File_search' %}",//路径
                    type: "GET", //提交方式
                    data: {"input1": input1},
                    success: function (result) {//返回数据根据结果进行相应的处理
                        if (result.code = 200) {
                            layer.msg(result.message);
                            //删除tr
                            $("#mytable tr:not(:first)").remove("");
                            var instart_tr = '';
                            for (file_var in result.data) {
                                instart_tr += "<tr>";
                                instart_tr += "<th>" +
                                    '<a href="{% url "myadmin:File_Views" %}?file_name=' + result.data[file_var]['file_url'] + '">' + result.data[file_var]['file_url'] + '</a>' + "</th>";
                                instart_tr += "<th>" +
                                    '<a href="javascript:" style="color:red" class="delete" ' +
                                    'onclick=delete_1("' + result.data[file_var]['file_url'] + '")>删除' +
                                    '</a></th>'
                                instart_tr += "</tr>";
                            }
                            $("#mytable").append(instart_tr);
                        }
                    },
                    error: function (error) {
                        layer.msg("500，请稍后尝试")
                    }

                });
            }

        });
        // 分页样式发送ajax请求获取数据
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
                , layer = layui.layer;
            //完整功能
            laypage.render({
                elem: 'demo7'
                , count: {{ count }}
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , jump: function (obj) {
                    $.ajax({
                        url: "{% url 'myadmin:File_List' %}",//路径
                        type: "POST", //提交方式
                        data: {"page": obj.curr, "limit": obj.limit},
                        success: function (result) {//返回数据根据结果进行相应的处理
                            $('#tables>tr').remove();
                            if (result.code = 200) {
                                let table_tr = '';
                                for (let file_name in result.file_data) {
                                    table_tr += '<tr>';
                                    table_tr += '<th><a href="{% url 'myadmin:File_Views' %}?file_name=' + result.file_data[file_name] + '">' + result.file_data[file_name] + '</a>';
                                    if (result.super_user) {
                                        table_tr += '<th>' +
                                            '<a href="javascript:" style="color:red" class="delete" ' +
                                            'onclick=delete_1("' + result.file_data[file_name] + '")>删除' +
                                            '</a></th>'
                                    }
                                    table_tr += '</tr>';
                                }
                                $('#tables').append(table_tr);
                            }
                        },
                        error: function (error) {
                            layer.msg("500，请稍后尝试")
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}
